﻿<style type="text/css">
    .guide-section {
       display: block!important;
       opacity: 1!important;
       width: 100%!important;
       height: 100%!important;
       left: 0!important;
       top: 0!important;
       background-color: rgba(0,0,0,0.8)!important;
       -webkit-transform: translateX(0)!important;
       transform: translateX(0)!important;
       -webkit-transition: none!important;
       transition: none!important;
    }
    .guide-section header.fixed:first-child h1{
       padding-left: 10px;
       border: 2px dashed rgb(84, 34, 186);
    }
    .guide-section .btn-close-guide{
       position: absolute;
       bottom: 0;
       width: 100%;
       height: 50px;
       line-height: 50px;
       text-align: center;
       border: none;
       background-color: #009688;
       color: #fff;
       font-size: 1.6rem;
       letter-spacing: 1px;
    }
    .guide-section .tip{
       position: absolute;
       left: 60px;
       bottom: -60px;
       color: #fff;
    }
    .guide-section .tip.tip-left{
       left: 10px;
       top: 30%;
       bottom: auto;
    }
    .guide-section .tip.tip-right{
       left: auto;
       right: 10px;
       top: 50%;
       bottom: auto;
       text-align: right;
    }
</style>


		  
<section class="guide-section fragment">
      <header class="fixed">
        <button type="button" class="icon icon-menu btn-drawer"></button>
        <menu>
          <button type="button" class="icon icon-compose btn-compose"></button>
          <button type="button" class="icon icon-more btn-show-more-oplist-option"></button>
        </menu>
        <h1 class="title">推理版</h1>
        <div class="tip">
          <span class="arrow arrow-up curve-right">
            <span class="curve"></span>
          </span>
          <span>点击标题栏也可刷新</span>
        </div>
      </header>
      <div class="scrollable">
        <div class="tip tip-left"><span class="arrow arrow-right"></span><p>向右滑动显示菜单</p></div>
        <div class="tip tip-right"><span class="arrow arrow-left"></span><p>向左滑动可刷新</p></div>
        <footer>
           <button type="button" class="btn-close-guide">知道了</button>
        </footer>
      </div>
        
</section>


     

